<template>
  <div>
      <vxe-grid
          id="TableDataList"
          ref="vxeTable"
          v-bind="gridOptions"
        >
      </vxe-grid>
  </div>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import { getAction } from '@/services/manage'
export default {
  name: 'TableDataList',
  mixins: [VxeTableListMixin],
  components: { },
  props: {
    table: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      columns: [],
      url: {
        list: '/dbconsole/data/page/',
        columnList: '/dbconsole/column/list/'
      },
      toolbarConfig: {
        import: false,
        buttons: []
      },
      proxyConfig: {
        autoLoad: false// 初始化不自动请求数据
      },
      filters: {}
    }
  },
  watch: {
    table: {
      handler(newVal) {
        if (newVal && newVal.type === 'table') {
          const { data } = newVal
          this.url.list = '/dbconsole/data/page/' + data.dbInfoId
          this.getColumn()
          this.loadData()
        } else {
          this.$nextTick(() => {
            this.columns = []
            this.$refs.vxeTable.reloadData([])
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    getColumn() {
      const { data } = this.table
      this.columns = [
        { type: 'seq', width: 60, field: 'seq' }
      ]
      getAction('/dbconsole/column/list/' + data.dbInfoId + '/' + data.tableName).then(res => {
        if (res.success) {
          res.result.forEach(item => {
            this.columns.push({
              title: item.columnName,
              field: item.columnName,
              width: 100
            })
          })
        }
      })
    },
    getQueryParams() { // 获取查询条件
      var param = {
        pageNo: this.ipagination.currentPage,
        pageSize: this.ipagination.pageSize,
        tableName: this.table.data.tableName
      }
      param.pageNo = this.ipagination.currentPage
      param.pageSize = this.ipagination.pageSize
      return param
    },
    loadData(type) { // type类型为 reload、query 参考vxe-table文档setup.toolbar.buttons，code参数
      if (this.table.type !== 'table') {
        return this.$message.warning('请选择表')
      }
      this.$nextTick(() => {
        this.$refs.vxeTable.commitProxy(type || 'query')
      })
    }
  }
}
</script>

<style>

</style>
